<template>
    <a-form auto-label-width size="mini" layout="vertical">
        <a-form-item :label="customTranslate('Assignee')">
            <a-select v-model="assignee" allow-clear>
                <a-option v-for="(user,index) in users" :value="user.value" :key="index">{{user.name}}</a-option>
            </a-select>
        </a-form-item>
        <a-form-item :label="customTranslate('Candidate Users')">
            <a-select v-model="candidateUsers" multiple :max-tag-count="2" allow-clear>
                <a-option v-for="(user,index) in users" :value="user.value" :key="index">{{user.name}}</a-option>
            </a-select>
        </a-form-item>
        <a-form-item :label="customTranslate('Candidate Groups')">
            <a-select v-model="candidateGroups" multiple :max-tag-count="2" allow-clear>
                <a-option v-for="(group,index) in groups" :value="group.value" :key="index">{{group.name}}</a-option>
            </a-select>
        </a-form-item>
        <a-form-item :label="customTranslate('Due Date')">
            <a-input v-model="dueDate"></a-input>
        </a-form-item>
        <a-form-item :label="customTranslate('Follow Up Date')">
            <a-input v-model="followUpDate"></a-input>
        </a-form-item>
        <a-form-item :label="customTranslate('Priority')">
            <a-input v-model="priority"></a-input>
        </a-form-item>
    </a-form>
</template>

<script>
import { inject, toRaw } from "vue";
import customTranslate from "../../translate/customTranslate";

export default {
    name: 'userAssign',
    props: ["element"],
    data() {
        return {
            assignee: "",
            candidateGroups: [],
            candidateUsers: [],
            dueDate: "",
            followUpDate: "",
            priority: 0
        };
    },
    setup() {
        const bpmnModeler = inject("bpmnModeler");
        const users = inject("users");
        const groups = inject("groups");
        return {
            bpmnModeler,
            users,
            groups,
            customTranslate
        };
    },
    mounted() {
        console.log(this.element);
        this.assignee = this.element.businessObject.$attrs['flowable:assignee'] || ''
        this.candidateGroups = this.element.businessObject.candidateGroups || []
        this.candidateUsers = this.element.businessObject.$attrs['flowable:candidateUsers'] || []
        this.dueDate = this.element.businessObject.$attrs['flowable:dueDate'] || ''
        this.followUpDate = this.element.businessObject.$attrs['flowable:followUpDate'] || ''
        this.priority = this.element.businessObject.$attrs['flowable:priority'] || 0
    },
    watch: {
        assignee: {
            immediate: false,
            handler:
            function(newVal) {
                const modeling = toRaw(this.bpmnModeler.get("modeling"));
                modeling.updateProperties(toRaw(this.element), {
                    "flowable:assignee": newVal,
                });
            }
        },
        candidateUsers: {
            immediate: false,
            handler:
            function(newVal) {
                const modeling = toRaw(this.bpmnModeler.get("modeling"));
                modeling.updateProperties(toRaw(this.element), { "flowable:candidateUsers": newVal });
            }
        },
        candidateGroups: {
            immediate: false,
            handler:
            function(newVal) {
                const modeling = toRaw(this.bpmnModeler.get("modeling"));
                modeling.updateProperties(toRaw(this.element), { "flowable:candidateGroups": newVal });
            }
        },
        dueDate: {
            immediate: false,
            handler:
            function(newVal) {
                const modeling = toRaw(this.bpmnModeler.get("modeling"));
                modeling.updateProperties(toRaw(this.element), { "flowable:dueDate": newVal });
            }
        },
        followUpDate: {
            immediate: false,
            handler:
            function(newVal) {
                const modeling = toRaw(this.bpmnModeler.get("modeling"));
                modeling.updateProperties(toRaw(this.element), { "flowable:followUpDate": newVal });
            }
        },
        priority: {
            immediate: false,
            handler:
            function(newVal) {
                console.log(newVal);
                const modeling = toRaw(this.bpmnModeler.get("modeling"));
                modeling.updateProperties(toRaw(this.element), { "flowable:priority": newVal });
            }
        },
    },
}
</script>

<style lang="scss" scoped>

</style>